<!--
 * Copyright (c) 2009 Regents of the University of California (Regents). Created
 * by TELS, Graduate School of Education, University of California at Berkeley.
 *
 * This software is distributed under the GNU Lesser General Public License, v2.
 *
 * Permission is hereby granted, without written agreement and without license
 * or royalty fees, to use, copy, modify, and distribute this software and its
 * documentation for any purpose, provided that the above copyright notice and
 * the following two paragraphs appear in all copies of this software.
 *
 * REGENTS SPECIFICALLY DISCLAIMS ANY WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE. THE SOFTWAREAND ACCOMPANYING DOCUMENTATION, IF ANY, PROVIDED
 * HEREUNDER IS PROVIDED "AS IS". REGENTS HAS NO OBLIGATION TO PROVIDE
 * MAINTENANCE, SUPPORT, UPDATES, ENHANCEMENTS, OR MODIFICATIONS.
 *
 * IN NO EVENT SHALL REGENTS BE LIABLE TO ANY PARTY FOR DIRECT, INDIRECT,
 * SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, INCLUDING LOST PROFITS,
 * ARISING OUT OF THE USE OF THIS SOFTWARE AND ITS DOCUMENTATION, EVEN IF
 * REGENTS HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * @author: Hiroki Terashima
-->
<html>
<head>

<script type="text/javascript" src="../common/js/loadxmldoc.js"></script>
<!-- YUI Seed -->
<script src="http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript" src="../common/js/helperfunctions.js"></script>
<script type="text/javascript" src="matchsequenceyui.js"></script>
<script type="text/javascript" src="matchsequencestate.js" ></script>
<script type="text/javascript" src="matchsequencefeedback.js" ></script>
<script type="text/javascript" src="matchsequencebucket.js" ></script>
<script type="text/javascript" src="matchsequencechoice.js" ></script>
<script type="text/javascript" src="matchsequence.js" ></script>      
          
<link rel="stylesheet" type="text/css" href="../common/css/htmlAssessment.css" />
<link rel="stylesheet" type="text/css" href="matchstyles.css" />
<link rel="stylesheet" type="text/css" href="../common/css/niftyCorners.css" />

<script type="text/javascript">
var ms;   // global variable so it can be accessed by other functions
var currentStateXML;  // global variable containing current state as xml string
var ddList = [];  // list of all draggable nodes
var currentState;   // current state;

function renderMS() {
  var xmlDoc=loadXMLDoc("match_sample.xml");
  ms = new MS(xmlDoc);
  ms.render();
}
		
/**
 * xmlString contains QTI-coded xml content
 */
function loadXMLString(xmlString) {
	  var xmlDoc=loadXMLDocFromString(xmlString);	
	  ms = new MS(xmlDoc);
	  ms.render();	
}
</script>

<!--  Javascript Pop up window -->

<script type="text/javascript">

var newWin = null;
function popUp(strURL, strType, strHeight, strWidth) {
 if (newWin != null && !newWin.closed)
   newWin.close();
 var strOptions="";
 if (strType=="console")
   strOptions="resizable,height="+
     strHeight+",width="+strWidth;
 if (strType=="fixed")
   strOptions="status,height="+
     strHeight+",width="+strWidth;
 if (strType=="elastic")
   strOptions="toolbar,menubar,scrollbars,"+
     "resizable,location,height="+
     strHeight+",width="+strWidth;
 newWin = window.open(strURL, 'newWin', strOptions);
 newWin.focus();
}

</script>

<!--  Nifty Cube for Rounded Corners -->

<script type="text/javascript" src="../common/js/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#locationBar2","transparent, small bottom");
Nifty("div#questionCountBox","big, bl tr");
Nifty("div#playContainer","big, all");
}
</script>

</head>

<body>

<div id="centeredDiv">

<!--
<div id="locationBar">
	<div class="Unit1">Unit X</div>
    <div class="stepTypeLabel"><a href="InstantQuizInfoBox.html" onclick="popUp(this.href,'console',440,720);return false;" target="_blank">INSTANT QUIZ</a>&nbsp(No Grading)</div>
    <div class="teacherCheckIcon"></div>
</div>
-->

<div id="locationBar2">
	<div class="Unit1">Unit X</div>
    <div class="stepTypeLabel"><a href="InstantQuizInfoBox.html" onclick="popUp(this.href,'console',440,720);return false;" target="_blank">INSTANT QUIZ</a>&nbsp(No Grading)</div>
    <div class="teacherCheckIcon"></div>
</div>

<div id="questionCountBox" class="BG3">
	<table id="questionTable">
		<tr>
		<td id="questionNumber">Question X of Y:</td>
	    <td id="questionType">Match & Sequence</td>
		<td id="questionHelp"><a href="MatchSequenceInfoBox.html" onclick="popUp(this.href,'console',700,720);return false;" target="_blank">&nbsp&nbsp&nbsp</a></td>
		</tr>
		</tr>
	</table>
</div>   <!-- end of questionNumberBox -->

<div>
	<div class="instructionsReminder">For instructions click <a href="MatchSequenceInfoBox.html" onclick="popUp(this.href,'console',700,720);return false;" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
	<div id="promptDiv" class="Color1">Prompt goes here. This text will automatically be replaced by actual prompt.</div>
</div>

<div id="playContainer" class="BG5">
	<div id="play"></div>
</div>

<div id="feedbackDiv">
</div>

<!-- Anchor-Based Button Layout using TABLE -->

	<div id="buttonDiv">
		<div id="statusDiv">
			<div id="numberAttemptsDiv"></div>
		</div>
		<table id="buttonTable">
		   <tr>
		   	<td><a href="#" id="checkAnswerButton" onClick="javascript:ms.checkAnswer();" >Check Answers</a></td>
		   	<td><a href="#" id="nextQuestionButton" onClick="" class="disabledLink" >Previous Q</a></td>
		   	<td><a href="#" id="nextQuestionButton" onClick="" class="disabledLink" >Next Q</a></td>
	   	   </tr>
	   	 </table>
	</div>

<div id="triesContainer">
	<div id="totalTries">Number of <i>Check Answers</i> used so far: <b>0</b></div>
	<div id="remainingTries">You can check your answers <b>5</b> more times before the choices reset.</div>
</div>
</div>   <!-- end centered Div -->

<script type="text/javascript">
renderMS();
</script>

</body>
</html>
